<template>
	<div class="bg-box">
		<div class="page-title">
			{{title}}
			<div class="sub-title" v-if="time">
				<span style="font-weight: 700;">{{$u.timeFormat(time, 'yyyy-mm-dd')}}</span>
			</div>
		</div>
		<slot></slot>
	</div>
</template>

<script>
	export default {
		name:"customize-head",
		props:['title','time']
	}
</script>
<style lang="scss" scoped>
	.bg-box {
		background: url(@/static/h5/bg.png) no-repeat top left, #f0f0f0;
		background-position: 0 0;
		background-size: 100% auto;
		background-attachment: fixed;
		padding: 0 10px;
		padding-top: 60px;
		overflow: hidden;

		.page-title {
			text-align: center;
			font-size: 24px;
			font-weight: 600;
			color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			letter-spacing: 2px;

			.sub-title {
				display: flex;
				gap: 15px;
				justify-content: center;
				margin: 10px 0 20px 0;
				padding: 8px 16px;
				border-radius: 9999px;
				background-color: rgba(0, 0, 0, .3);
				letter-spacing: 0px;

				span {
					display: block;
					font-weight: 400;
					font-size: 14px;
					line-height: 1;
				}
			}
		}
	}
</style>